<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VGroup>
          <el-select class="w-30" v-model="form.orderRange.type" placeholder="请选择">
            <el-option v-for="item in orderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input v-model="form.orderRange.value" placeholder="请输入" class="w-40"></el-input>
        </VGroup>
        <select-personnel class="w-40" v-model="form.owner_id" placeholder="销售员"></select-personnel>
        <el-select class="selectClass w-30" v-model="form.status" placeholder="同步状态">
          <el-option v-for="item in options['deliverymanage.omsOrder']?.[0].orderStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <SelectPlatform class="selectClass w-30" v-model="form.order_status" placeholder="订单来源"></SelectPlatform>
        <SelectWarehouse class="selectClass" style="width: 220px;" v-model="form.warehouse_id" multiple placeholder="仓库">
        </SelectWarehouse>
        <!-- <el-select class="selectClass" v-model="form.order_status" placeholder="订单来源">
          <el-option v-for="item in options['deliverymanage.omsOrder']?.[0].orderType" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select> -->
        <SelectCountry class="w-30" v-model="form.country" placeholder="国家"></SelectCountry>
        <el-select class="selectClass w-30" v-model="form.allot_status" placeholder="状态">
          <el-option v-for="item in options['deliverymanage.omsOrder']?.[0].otherStatusMap" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 100px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()"
            style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" @query="query"></ComModal>
  </VPage>
</template>
<script setup name="OverseasWarehouseWarehouseStock" lang="jsx">
import { ElMessage,ElMessageBox } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { getEnums } from '@/api/public'
import { queryOmsOrderList, manualShip } from './api'
import ComModal from './components/ComModal.vue'
import SelectCountry from '@/components/SelectCountry'
import SelectPlatform from '@/components/SelectPlatform'
import SelectWarehouse from '@/components/SelectWarehouse'


const timeOption = [
  { label: "创建时间", value: "create_time" },
  { label: "下单时间", value: "order_time" },
]

const orderOptions = [
  { label: "订单号", value: 'oms_order_no' },
  { label: "第三方平台单号", value: 'order_no' },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      orderRange: { type: 'oms_order_no', value: [], range: true },
      timeRange: { type: 'order_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'oms_order_no', title: '订单号', width: 210, slots: {
        default: ({ row }) => {
          return <div class="base-text-color cursor-pointer" onClick={() => open('view', row.id)}>{row.oms_order_no}</div>
        }
      }
    },
    {
      field: 'order_no', title: '海外仓单号', width: 210
    },
    {
      field: 'tracking_number', title: '跟踪号', width: 190
    },
    {
      field: 'status_cn', title: '状态', width: 100
    },
    {
      field: 'platform', title: '订单来源', width: 120
    },
    {
      field: 'sync_status_cn', title: '同步状态', width: 120
    },
    {
      field: 'reason', title: '异常信息', width: 120
    },
    {
      field: 'order_time', title: '下单时间', width: 180
    },
    {
      field: 'create_time', title: '创建时间', width: 180
    },
    {
      field: 'warehouse_name', title: '发货仓库', width: 120
    },
    {
      field: 'owner_name_arr', title: '销售员', width: 120
    },
    {
      field: 'ship_remark', title: '备注', width: 120
    },
    {
      title: '操作', width: "80", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              <el-link type="primary" underline={false} class="mr-2" onClick={() => handleShip(row.id)}>手动发货</el-link>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryOmsOrderList({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: []
})
const { options } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "deliverymanage.omsOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

const ComModalRef = ref()
const open = (type, id) => {
  ComModalRef.value.open(type, id)
}

// 手动配货
const handleShip = (id) => {
  ElMessageBox.confirm('是否进行手动配货?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    manualShip({ id: [id] })
      .then((res) => {
        query()
        ElMessage.success(res.message)
      })
  })
}
</script>